<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<style>
.datelinknew{
display: block;
height: 35px;
line-height: 35px;
vertical-align: middle;
border: 1px solid transparent;}
.datelinkred{
display: block;
height: 35px;
line-height: 35px;
vertical-align: middle;
border: 1px solid transparent;
color: red;
}
.datelinkbasic{
display: block;
height: 35px;
line-height: 35px;
vertical-align: middle;
border: 1px solid transparent;
}
</style>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>

  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="language" content="en" />

  <link rel="shortcut icon" HREF="/images/favicon.png">
  <link rel="icon" href="/images/favicon.png"></link> 
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="css/style.css">

  <link rel="stylesheet" href="css/redmond/jquery-ui-1.8.17.custom.css" />
  <link rel="stylesheet" href="css/basic.css">
  <!-- end CSS-->
  
  <!-- 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
  -->
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script> 
<script src="js/jquery.watermark.min.js" type="text/javascript"></script> 

  <script src="js/groupheal.js" type="text/javascript"></script>
  <script src="js/nick.js" type="text/javascript"></script>
    
  <title>GroupHeal | Providing A Useful Tools to You and Defining the Clinical Research of Tomorrow</title>

  
  
</head>

<body>
	<input type="hidden" id="isguest" value="true"/>

<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/appointment.css">

<div id="completecontent">

	<div id="topbar" class="minimized" >
		<div id="header" class="minimized" >
			<a class="nav" href="./login.cgi
			" >
&nbsp; &nbsp; 
			Log Out		</a><a class="nav" id="stats"  >
&nbsp; &nbsp; 
			Statistics		</a><a class="nav" href="./admin.cgi" >
&nbsp; &nbsp; 
			Admin		</a>
			
			
			<a class="nav" href="http://www.cs.columbia.edu/~zz2167/project1/cs3157project1/loginlog.txt" >
&nbsp; &nbsp; 
			Log Attempts		</a>
			<!--<a id="logout" class="nav" >

			Register/Log In			</a>-->
			
			<div id="logo" class="minimized">
				<img src="images/logosmall.png"/>
			</div>

			
		</div>

	</div>

	<div id="container">
	
	<div id="container-top">


	</div>
	
	<div id="index-container">
		
	
				
		<div id="content">
			<div id="left">
			</div>
			<div id="center">
				<link rel="stylesheet" href="css/appointment.css">




<div id="aptlist">

	<div id="appointment">
		<div id="md-select">
			<div class="mddescription">
				<div class="mdimg">
					<img src="http://physicalexamcenter.com/images/doc-img.jpg" width="50px"/>
				</div>
				<div class="mdtitle">
					<h3>Select a Doctor</h3>
					<script>
		/*			
$(document).ready(function() {
    $('.datelinkred').click(function() {
	$('#action').val("cancel");
	$('#doc').val("cancel");
	
	//$('#time').val($(this).attr('class').replace(/[^0-9]+/g, ''));
	$('#doc').val($("#doc-select option:selected").text());
	
	alert($(this).attr('class'));
	$('#targetform').submit();
    });
});

$(document).ready(function() {
    $('.datelinknew').click(function() {
	$('#time').val($(this).attr('class').replace(/[^0-9]+/g, ''));
	
	$('#doc').val($("#doc-select option:selected").text());
	
	//$('#date').val($("#doc-select option:selected").text());
	alert($(this).attr('class'));
	$('#targetform').submit();
    });
});
		*/
    $(document).ready(function() {
      $('#usertext').val("./next5-"+$("#username").val()+".txt");
populate_select2();
$('#stats').attr('href', "./statistics.pl.cgi?username="+$("#username").val());
$('#user').val($("#username").val());

});
   $(document).ready(function () {
    
    //alert($('#docvalueb').val());
      $("#doc-select").val($('#docvalueb').val());
      $("#go").click(function () {
        var text = $("#doc-select option:selected").text();
        var value = $("#doc-select option:selected").val();
	
	
var contentType = "application/x-www-form-urlencoded; charset=utf-8";

var request = new XMLHttpRequest(); 
request.open("GET", $('#usertext').val(), false);
request.setRequestHeader('Content-type', contentType);

if (request.overrideMimeType) request.overrideMimeType(contentType);

// exception handling
try { request.send(null); } catch (e) { return null; }
if (request.status == 500 || request.status == 404 || request.status == 2 || (request.status == 0 && request.responseText == '')) return null;

var times;
times = request.responseText.replace(/[A-Za-z:,-]/g, '').replace(/\+/g, '').split('\n')
for( var i in times ) {
    console.log(times[i]);
}

var j = 0;
var displaytimes=times[value];
for( j;j<=45;j++){
  console.log(j + " " + displaytimes[j+3]);
  if(displaytimes[j+3]==2){
        $(".time" + j).addClass("datelinkred");
  $(".time" + j).removeClass("datelinktaken");
  
  $(".time" + j).removeClass("datelinknew");
  }
  else if(displaytimes[j+3]>0){
  $(".time" + j).addClass("datelinktaken");
    $(".time" + j).removeClass("datelinkred");
  }
  else{
  $(".time" + j).removeClass("datelinktaken");
    $(".time" + j).removeClass("datelinkred");
  $(".time" + j).addClass("datelinkbasic");
    
  }
}
    $('.datelinkred').click(function() {
	$('#action').val("cancel");
	$('#time').val($(this).attr('class').replace(/[^0-9]+/g, ''));
	
	//$('#time').val($(this).attr('class').replace(/[^0-9]+/g, ''));
	$('#doc').val($("#doc-select option:selected").text());
	$('#docvalue').val($("#doc-select option:selected").val());
	//alert($(this).attr('class'));
	$('#targetform').submit();
    });
    
        $('.datelinknew').click(function() {
	$('#time').val($(this).attr('class').replace(/[^0-9]+/g, ''));
	
	$('#doc').val($("#doc-select option:selected").text());
	$('#docvalue').val($("#doc-select option:selected").val());
	
	//$('#date').val($("#doc-select option:selected").text());
	//alert($(this).attr('class'));
	$('#targetform').submit();
    });
//        alert("Selected text=" + text + " Selected value= " + value + " Schedule=" + displaytimes );
      });
        $("#go").click();
    });
</script>
					<script language="javascript">


function populate_select2() {

var contentType = "application/x-www-form-urlencoded; charset=utf-8";

var request = new XMLHttpRequest(); 
request.open("GET", $('#usertext').val(), false);
request.setRequestHeader('Content-type', contentType);

if (request.overrideMimeType) request.overrideMimeType(contentType);

// exception handling
try { request.send(null); } catch (e) { return null; }
if (request.status == 500 || request.status == 404 || request.status == 2 || (request.status == 0 && request.responseText == '')) return null;

lines = request.responseText.replace(/[0-9:+]/g, '').split('\n')
for( var i in lines ) {
    console.log(lines[i]);
}

var times;
times = request.responseText.replace(/[A-Za-z:,-]/g, '').split('\n')
for( var i in times ) {
    console.log(times[i]);
}



//alert(times);

	var select = document.getElementById("doc-select");
	for(index in lines) {
		select.options[select.options.length] = new Option(lines[index], index);
	}

 
}
</script>
					<p><form ">
    <select id="doc-select" style="   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   border: 1px solid #ccc;
   height: 34px;"></select>

    <div style="margin-top: 10px;">
           <input type="button" id="go" value="Go" /><input type="button" value="Populate Hard Coded" onclick="populate_select1()"  style="visibility:hidden"/>
      <input type="button" value="Populate From Array" onclick="populate_select2()"  style="visibility:hidden"/> <br/>
      <input type="button" value="Empty" onclick="empty_select()"  style="visibility:hidden"/> <input type="button" value="Selected" onclick="alert_selected()"  style="visibility:hidden"/></div>

</form>
					  
<form name="input" id="targetform" action="appointment.cgi" method="post" style="opacity:0.0001;"> 
	<input class="rounded" name="user" id="user" type="text">
	<input class="rounded" name="usertext" id="usertext" type="text" >
	<input class="rounded" name="action" id="action"  value="confirm" type="text">
	<input class="rounded" name="time" id="time" type="text">
	  	<input class="rounded" name="doc" id="doc" type="text">
		  
	  	<input class="rounded" name="docvalue" id="docvalue" type="text">
	<input class="rounded" name="password" id="LoginForm_Password" type="password">	
	<input type="submit" value="Submit">
</form>
					</p>
					<p class="quiet">
					All of our doctors are board certified and organized by category. </div>
			</div>
		</div>
		<div id="time-select">
	<div style="color:red">Your Reservations in Red [Click to Cancel] </div>
		  <div style="color: #458BB6;">Free Reservations in Blue [Click to Reserve]</div>
		  Closed/External Reservation in Gray [Reservation not Available]<br/>
		 
        	<div class="calendar">	  
		  <div>
			<div class="mddate">
				<div class="date">Today (+0)<br /></div>
				<ul>
					<li><a class="datelinknew time1" >09:00 AM</a></li>
									
					<li><a class="datelinknew time2">10:00 AM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330444800" class="datelinknew time3">11:00 AM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330448400" class="datelinknew time4">12:00 PM</a></li>

									
					<li><a id="4edd7cd71310a4035d00001d-1330452000" class="datelinknew time5">01:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330455600" class="datelinknew time6">02:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330459200" class="datelinknew time7">03:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330462800" class="datelinknew time8">04:00 PM</a></li>
				</ul>
			</div>
						<div class="mddate">
				<div class="date">Tomorrow (+1)<br /></div>

						<ul>			
					<li><a id="4edd7cd71310a4035d00001d-1330524000" class="datelinknew time9">09:00 AM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330527600" class="datelinknew time10">10:00 AM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330531200" class="datelinknew time11">11:00 AM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330534800" class="datelinknew time12">12:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330538400" class="datelinknew time13">01:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330542000" class="datelinknew time14">02:00 PM</a></li>

									
					<li><a id="4edd7cd71310a4035d00001d-1330545600" class="datelinknew time15">03:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330549200" class="datelinknew time16">04:00 PM</a></li>
							</ul>	
			</div>
						<div class="mddate">
				<div class="date">Day After (+2)<br /></div>
						<ul>			
					<li><a id="4edd7cd71310a4035d00001d-1330610400" class="datelinknew time17">09:00 AM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330614000" class="datelinknew time18">10:00 AM</a></li>

									
					<li><a id="4edd7cd71310a4035d00001d-1330617600" class="datelinknew time19">11:00 AM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330621200" class="datelinknew time20">12:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330624800" class="datelinknew time21">01:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330628400" class="datelinknew time22">02:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330632000" class="datelinknew time23">03:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330635600" class="datelinknew time24">04:00 PM</a></li>
</ul>
								
			</div>
						<div class="mddate">
				<div class="date">Day After (+3)<br /> </div>
									<ul>
					<li><a id="4edd7cd71310a4035d00001d-1330696800" class="datelinknew time25">09:00 AM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330700400" class="datelinknew time26">10:00 AM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330704000" class="datelinknew time27">11:00 AM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330707600" class="datelinknew time28">12:00 PM</a></li>

									
					<li><a id="4edd7cd71310a4035d00001d-1330711200" class="datelinknew time29">01:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330714800" class="datelinknew time30">02:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330718400" class="datelinknew time31">03:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330722000" class="datelinknew time32">04:00 PM</a></li>
								</ul>
			</div>
						<div class="mddate">
				<div class="date">Day After (+4)<br /> </div>

								<ul>	
					<li><a id="4edd7cd71310a4035d00001d-1330956000" class="datelinknew time33">09:00 AM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330959600" class="datelinknew time34">10:00 AM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330963200" class="datelinknew time35">11:00 AM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330966800" class="datelinknew time36">12:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330970400" class="datelinknew time37">01:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330974000" class="datelinknew time38">02:00 PM</a></li>

									
					<li><a id="4edd7cd71310a4035d00001d-1330977600" class="datelinknew time39">03:00 PM</a></li>
									
					<li><a id="4edd7cd71310a4035d00001d-1330981200" class="datelinknew time40">04:00 PM</a></li>
								</ul>
			</div>
			</div>
            </div>
		</div>
	</div>
</div>


				
			</div>
			<div id="right">
		<div class="clear"></div>
			</div>
		</div>
	</div>
	
	<div id="floating" style="visibility: hidden;">

		<div id="floatingdiv">
			<div id="floating-centered">
				<div id="floating-content">
					<input type="button" class="close" value="close"/>
					<div class="clear"></div>
					<div id="floating-data">
                    <div class="mdimg">
					<img src="http://physicalexamcenter.com/images/doc-img.jpg" width="50px">
				</div> <div class="floatdescription"><p>Fri 2nd of March 2012 02:00 PM</p><p>
					</p><h5>Dr. Shan Zhao</h5>
					342 East 110th Street 6B<br>
										New York, NY  10029<br>
					<br>
					<p class="description">
					Board certified MD/PhD Dermatologist serving the Greater NYC Area for the past 20 years.					</p>
				</div><div class="clear"></div>

<div id="addappointment">
	<form id="addappointment-form" action="/index.php?r=appointment/add" method="post">	
	<div id="error"></div>
	
	<label value="Name" class="left required" for="AppointmentForm_Name">Name <span class="required">*</span></label>	<input class="left" name="AppointmentForm[Name]" id="AppointmentForm_Name" type="text">
	<input class="right" name="AppointmentForm[Phone]" id="AppointmentForm_Phone" type="text">	<label value="Phone" class="right required" for="AppointmentForm_Phone">Phone <span class="required">*</span></label>
	<label value="Insurance" class="left" for="AppointmentForm_Insurance">Insurance</label>	<input name="AppointmentForm[Insurance]" id="AppointmentForm_Insurance" type="text">
	<label value="Concern" class="left" for="AppointmentForm_Concern">Concern</label>	<textarea name="AppointmentForm[Concern]" id="AppointmentForm_Concern"></textarea>	
	<div class="captcha">
		<label value="Verification Code" class="left required" for="AppointmentForm_VerifyCode">Verify Code <span class="required">*</span></label>		<img id="yw0" src="/index.php?r=appointment/captcha&amp;v=4f50204a202ed" alt="">		<a id="captcha">Get a new code</a>
		<input class="rounded" name="AppointmentForm[VerifyCode]" id="AppointmentForm_VerifyCode" type="text">	</div>
	<input id="newsubmit" value="Add Appointment" type="button">
	</form></div>

                    
                    
                    </div>
				</div>
			</div>
			<div id="floating-dimming"></div>

		</div>
	</div>



	</div>
</div>



<div id="bottombar">
	<div id="footer">
	<p>(c) 2012 GroupHeal</p>

	<ul>
		<li><a href="mailto://info@groupheal.com">Contact</a></li>
		<li><a href="index.php?r=site/about">About</a></li>
		<li><a href="index.php?r=site/help">Help</a></li>
		<li><a href="index.php?r=site/terms">Privacy and Terms</a></li>
	</ul>
	</div>

</div>


<div id="commentformcontainer" class="displaynone">
<div id="commentform">
	<textarea id="comment">Enter a comment</textarea>
	<input type="button" id="submit"  value="Submit Comment">
</div>
</div>

<script language="javascript">
		
	groupheal.tooltip.show();
	

	docalarm.loggedinmainload();


		
	$('a.nav#logout').click(function() {
		$.get('index.php?r=site/login&ajax=1',
		function(returned_data) {
			groupheal.floatter.changecontent(returned_data);
			groupheal.floatter.show();
	    });
	});

		
	$('#comment').click(function() {
		groupheal.floatter.changecontent($('#commentformcontainer').html());
		groupheal.textbox.associatecheck($('#commentform #comment'), 'Enter a comment');
		$('#commentform #submit').click(groupheal.comment.submit);
		groupheal.floatter.show();
	});
	
	
	$('#logo img').click(function() { window.location = "index.php?p=1"});
	$("#searchBox").watermark("Enter a Doctor Filter");
	$('input.close').click(docalarm.floatter.hide);	
	docalarm.searchUrl = '/index?r=appointment/search';
	docalarm.baseUrl = '';
	docalarm.finalizePage();
</script> 
	



</body>
</html>

